<template>
    <view class="right">
        <view class="one"   @click="youhuiqu">
            <image :src="title" mode="heightFix"></image>
        </view>
        <view class="two">
            <view v-for="item in List" class="list" :key="item.id">
                <view class="img">
                    <image  :src="item.img" mode="widthFix"></image>
                </view>
                <text>{{item.text}}</text>
            </view>
            <view class="list" @click="gengduo">
                <view  class="img2">
                    <image  src="../../static/icon/123.png" mode="widthFix"></image>
                </view>
                <text>全部</text>
            </view>
        </view>
    </view>
</template>

<script>

    export default {
        name: "rightNav",
        data(){
            return{
                title:[],
                List:[]
            }
        },
        created(){
            let _this=this
            uni.getStorage({
                key: 'right',
                success: function (res) {
                    _this.List=res.data.data
                    _this.title=res.data.titleImg
                    console.log(_this.List);
                }
                })
        },
        methods:{
            youhuiqu(){
                uni.navigateTo({
                    url:"../../pages/yhq/yhq"
                })
            },
            gengduo(){
                uni.navigateTo({
                    url:"../../pages/fruit/fruit"
                })
            }
        }

    }
</script>

<style scoped>
    /*body{*/
    /*    width: 10rpx;*/
    /*    height: 10rpx;*/
    /*    font-size: 16rpx;*/
    /*}*/
    .right{
        width: 100%;
    }
    .one{
        width: 94%;
        margin: auto;
    }
    .one>image{
        width: 100%;
        border-radius: 5%;
        height: 200rpx;
    }
    .two{
        width: 94%;
        margin: auto;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content:space-between;
        display: flex;
    }
    .list{
        margin: 10rpx 20rpx;
        width:22%;
        /*height: 260rpx;*/
        text-align: center;
    }
    .list>.img{
        width:70%;
        margin:6rpx auto;
    }
    .list>text{
        margin: 8rpx 0;
        font-size: 16rpx;
    }
    .img{
        width:100%;
    }
    .list>.img2{
        width: 50%;
        margin:16rpx auto;
    }
    .img>image{
        width: 100%;
    }
    .img2>image{
        width: 80%;
    }
</style>